<template>
  <div class="page-wrap">
    <Table filter v-bind="tableOpts" defaultExpandAll v-on="tableEvent">
      <template #operator>
        <div class="operator-wrap">
          <modifyOrder
            v-if="authority.includes(200)"
            ref="dialogRef"
            @change="fetchCurrentTable"
          />
          <modifyCAD ref="CADRef" @change="fetchCurrentTable" />
          <modifyAddition ref="additionRef" @change="fetchCurrentTable" />
          <!-- <modifyPayment ref="paymentRef" @change="fetchCurrentTable" /> -->
          <modifyOrderArea ref="orderAreaRef" @change="fetchCurrentTable" />
          <PaymentList ref="paymentListRef" @change="fetchCurrentTable" />
          <AdditionList ref="additionListRef" @change="fetchCurrentTable" />
          <ClassifyDetail ref="classifyDetailRef" @change="fetchCurrentTable" />
          <ParseDetail ref="ParseDetailRef" @change="fetchCurrentTable" />
        </div>
      </template>
    </Table>
  </div>
</template>

<script>
import tableMixins from "@/mixins/tableMixins.vue";
import modifyOrder from "./components/modifyOrder.vue";
import modifyCAD from "./components/modifyCAD.vue";
import modifyAddition from "./components/modifyAddition.vue";
// import modifyPayment from "./components/modifyPayment.vue";
import modifyOrderArea from "./components/modifyOrderArea.vue";
import ParseDetail from "./components/ParseDetail.vue";
import PaymentList from "./PaymentList.vue";
import AdditionList from "./AdditionList.vue";
import ClassifyDetail from "./ClassifyDetail.vue";
import { mapState } from "vuex";
import dayjs from "dayjs";

export default {
  name: "OrderManage",
  mixins: [tableMixins],
  components: {
    ParseDetail,
    ClassifyDetail,
    modifyOrderArea,
    modifyAddition,
    AdditionList,
    // modifyPayment,
    modifyOrder,
    modifyCAD,
    PaymentList,
  },
  data() {
    return {
      apiName: "newOrderList",
      form: {
        storeName: {
          tag: "el-input",
          label: "订单名称",
          value: "",
          props: {
            clearable: true,
            placeholder: "请输入订单名称",
          },
        },
        outStatus: {
          tag: "el-select",
          label: "出库状态",
          value: -1,
          items: [
            { label: "全部", value: -1 },
            { label: "待出库", value: 0 },
            { label: "部分出库", value: 1 },
            { label: "全部出库", value: 2 },
          ],
          props: {},
        },
        delivery: {
          tag: "el-date-picker",
          label: "发货日期",
          value: "",
          props: {
            clearable: true,
            placeholder: "请选择发货日期",
            pickerOptions: {
              // disabledDate (time) {
              // 	return time.getTime() < dayjs().startOf("day").valueOf();
              // },
            },
          },
        },
        orderBy: {
          tag: "el-select",
          label: "排序规则",
          value: "",
          items: [
            { label: "默认", value: "" },
            { label: "发货日期", value: "deliveryDate" },
            { label: "创单时间", value: "createAt" },
          ],
          props: {},
        },
      },
    };
  },
  computed: {
    authority() {
      const { authority = [] } =
        this.$quinn.getStorage("userDatav3") ||
        this.$store.state.userData ||
        {};
      return authority || [];
    },
  },
  methods: {
    formatQuery(params) {
      if (!params.orderBy) delete params.orderBy;
      try {
        const d = dayjs(params.delivery);
        if (d.isValid()) params.deliveryDate = d.format("YYYY-MM-DD");
      } catch (e) {
        console.log(e);
      }
      if (params.outStatus == -1) delete params.outStatus;
      return params;
    },
    handleAction(opts, row) {
      const { storeName: name, id } = row;
      let ref = null;
      const map = {
        CAD: "CADRef",
        addition: "additionRef",
        additionList: "additionListRef",
        payment: "paymentRef",
        paymentList: "paymentListRef",
        area: "orderAreaRef",
      };
      if (opts === "edit") return this.showDialog(opts, row);
      else if (opts == "costs")
        this.$api["newOrderCosts"]({
          id,
        }).then(({ costs = [] }) => {
          this.$quinn.expTable({
            fileName: `${name}-成本`,
            data: [costs],
            columns: [
              { label: "杂项成本", prop: "additionCost" },
              { label: "材料成本", prop: "materialCost" },
              { label: "安装成本", prop: "installCost" },
              { label: "售后成本", prop: "afterSaleCost" },
              { label: "总成本", prop: "totalCost" },
            ],
          });
        });
      else if (opts == "delete")
        this.showConfirm(`确认删除【${name}】？`, "newOrderDelete", { id });
      else if (["storageDetail", "goodsDetail"].includes(opts)) {
        row.type = opts.replace("Detail", "");
        ref = this.$refs.ParseDetailRef;
        // classifyDetailRef;
      } else ref = this.$refs[map[opts]];
      ref && ref.showDialog(opts, row);
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-table__expanded-cell) {
  padding: 0;
}
</style>
